<template>
    <a-modal title="书签分类编辑" @cancel="handleCancel" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" :loading="loading" type="primary" @click="handleOk">确认</a-button>
      </template>
      <slot>
        <a-form :label-col="labelCol" :model="BookmarksClas">
          <a-form-item label="分类名称">
            <a-input v-model:value="BookmarksClas.title" />
          </a-form-item>
          <a-form-item label="上级分类">
            <a-tree-select
              v-model:value="BookmarksClas.pid"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeLocData"
              placeholder="顶级分类"
              tree-default-expand-all
              :replaceFields="{ key: 'cid', value: 'cid' }"
            >
            </a-tree-select>
          </a-form-item>
        </a-form>
      </slot>
    </a-modal>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: 'BookmarksClassEdit',
  props: {
    editBookmarksCategory: Object,
  },
  data() {
    return {
      treeLocData: [],
      BookmarksClas: {},
      labelCol: {
        span: 4,
      },
      visible: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['getClassData'])
  },
  watch: {
    editBookmarksCategory: {
      handler() {
        this.BookmarksClas = { ...this.editBookmarksCategory };
        this.treeLocData = [{
          cid: 0,
          title: "顶级分类",
          pid: 0
        }, ...this.getClassData];
      },
      deep: true
    },
  },
  methods: {
    closeModal() {
      this.$emit('onClose', this.visible)
    },
    handleOk() {
      this.$emit('onData', this.BookmarksClas)
      this.closeModal()
    },
    handleCancel() {
      this.closeModal()
    }
  }
}
</script>

<style scoped>
</style>
